<template>
  <view class="container">
    <!-- 首页 -->
    <view v-if="!isStart" class="home-page">
      <!-- 顶部横幅 -->
      <view class="hero-banner">
        <view class="hero-content">
          <text class="hero-title">九型人格</text>
          <text class="hero-subtitle">探索你的性格密码</text>
          <text class="hero-desc">了解自己，发现潜能，成就更好的你</text>
        </view>
        <image class="hero-image" :src="banner" mode="aspectFill"></image>
      </view>

      <!-- 特性展示 -->
      <!-- <view class="features">
        <view class="feature-item">
          <view class="feature-icon">🎯</view>
          <view class="feature-text">
            <text class="feature-title">精准分析</text>
            <text class="feature-desc">基于九型人格理论的深度解析</text>
          </view>
        </view>
        <view class="feature-item">
          <view class="feature-icon">💫</view>
          <view class="feature-text">
            <text class="feature-title">性格洞察</text>
            <text class="feature-desc">揭示你的核心驱动力与潜能</text>
          </view>
        </view>
      </view> -->

      <!-- 测试流程 -->
      <view class="test-process">
        <view class="process-header">
          <text class="process-title">测试流程</text>
          <text class="process-subtitle">简单三步，了解真实的自己</text>
        </view>
        <view class="process-steps">
          <view class="step">
            <view class="step-number">1</view>
            <view class="step-info">
              <text class="step-title">完成测试</text>
              <text class="step-desc">回答精选问题，约3分钟</text>
            </view>
          </view>
          <view class="step">
            <view class="step-number">2</view>
            <view class="step-info">
              <text class="step-title">获取结果</text>
              <text class="step-desc">了解你的九型人格类型</text>
            </view>
          </view>
          <view class="step">
            <view class="step-number">3</view>
            <view class="step-info">
              <text class="step-title">深度解析</text>
              <text class="step-desc">探索性格优势与发展方向</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 开始按钮 -->
      <view class="start-section">
        <button class="start-button" @click="goStart">
          <text class="button-text">开始探索</text>
          <text class="button-icon">→</text>
        </button>
        <text class="disclaimer">本测试基于九型人格理论，帮助您更好地认识自己</text>
      </view>

      <!-- 广告位 -->
      <view class="ad-container">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>

    <!-- 测试页面 -->
    <view v-else class="test-page">
      <!-- 完成页面 -->
      <view v-if="isFinish" class="result-page">
        <view v-if="isLock" class="unlock-section">
          <view class="unlock-content">
            <view class="unlock-icon">✨</view>
            <text class="unlock-title">测试完成</text>
            <text class="unlock-subtitle">即将揭示你的九型人格类型</text>
            <button class="unlock-button" @click="submit">查看详细分析</button>
          </view>
        </view>
        <view v-else class="result-section">
          <view class="result-header">
            <text class="result-title">你的九型人格类型</text>
            <text class="result-type">{{ curResult.title }}</text>
          </view>
          <view class="result-content">
            <text class="result-desc">{{ curResult.desc }}</text>
          </view>
          <button class="restart-button" @click="goHome">重新测试</button>
        </view>
      </view>

      <!-- 问题页面 -->
      <view v-else class="question-page">
        <view class="progress-bar">
          <view class="progress-info">
            <text class="progress-text">问题 {{ curIndex + 1 }}/{{ dataList.length }}</text>
            <text class="progress-percent">{{ Math.round(((curIndex + 1) / dataList.length) * 100) }}%</text>
          </view>
          <view class="progress-track">
            <view class="progress-fill" :style="{ width: `${((curIndex + 1) / dataList.length) * 100}%` }"></view>
          </view>
        </view>

        <view class="question-card">
          <text class="question-text">{{ curQuizInfo.question }}</text>
          <view class="answer-list">
            <view
              class="answer-item"
              v-for="(item, index) in curQuizInfo.answerList"
              :key="index"
              :class="{ selected: item.select }"
              @click="selectAnswer(index)"
            >
              <text class="answer-text">{{ item.answer }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 广告位 -->
      <view class="ad-container">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import banner from "./static/jiuxing_banner.jpg";
import { jiuxingDataList, jiuxingResultMap } from "./static/jiuxing.js";
export default {
  data() {
    return {
      isStart: false,
      banner: banner,
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      curQuizInfo: {
        question: "",
        score: 0,
        answerList: [],
      },
      curResult: {
        level: null,
        min: null,
        max: null,
        title: "",
        desc: "",
      },
      isLock: true,
      isFinish: false,
      curIndex: 0,
      totalScore: 0,
      dataList: [],
      resultList: [],
      resultMap: {},
      jiuxingTotalScore: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0,
      },
    };
  },
  methods: {
    goStart() {
      this.initQuiz();
      this.isStart = true;
    },
    initQuiz() {
      let newDataList = jiuxingDataList;
      this.resultMap = jiuxingResultMap;
      for (let i in newDataList) {
        for (let j in newDataList[i].answerList) {
          newDataList[i].answerList[j].select = false;
        }
      }
      this.dataList = newDataList;
      if (this.dataList.length > 0) {
        this.curQuizInfo = this.dataList[0];
      }
    },
    submit() {
      showAdConfirmModal(() => {
        try {
          adVideoShow(() => {
            this.unLock();
          });
        } catch (error) {
          this.unLock();
        }
      });
    },
    // 解锁
    unLock() {
      let curType = "";
      let keys = Object.keys(this.jiuxingTotalScore).map(Number);
      curType = Math.max(...keys);
      if (this.resultMap[curType]) {
        this.curResult = this.resultMap[curType];
      }
      this.isLock = false;
    },
    selectAnswer(index) {
      let curAnswer = this.dataList[this.curIndex].answerList;
      for (let i in curAnswer) {
        curAnswer[i].select = false;
      }
      curAnswer[index].select = true;
      for (let i in curAnswer[index].value) {
        for (let j in this.jiuxingTotalScore) {
          if (j == curAnswer[index].value[i]) {
            this.jiuxingTotalScore[j] += 1;
          }
        }
      }
      if (this.curIndex < this.dataList.length - 1) {
        setTimeout(() => {
          this.curIndex += 1;
          this.curQuizInfo = this.dataList[this.curIndex];
        }, 1000);
      } else {
        setTimeout(() => {
          this.isFinish = true;
        }, 1000);
      }
    },
    back() {
      if (this.curIndex > 0) {
        this.curIndex -= 1;
      } else {
        this.isStart = false;
      }
    },
    goHome() {
      this.isStart = false;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: #fafafa;
}

.home-page {
  .hero-banner {
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
    padding: 40rpx 40rpx 80rpx 40rpx;
    color: #fff;
    position: relative;
    overflow: hidden;
    
    .hero-content {
      position: relative;
      z-index: 2;
      
      .hero-title {
        font-size: 80rpx;
        font-weight: 800;
        display: block;
        margin-bottom: 24rpx;
        letter-spacing: 4rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }
      
      .hero-subtitle {
        font-size: 40rpx;
        font-weight: 600;
        display: block;
        margin-bottom: 20rpx;
        opacity: 0.95;
      }
      
      .hero-desc {
        font-size: 28rpx;
        opacity: 0.9;
        display: block;
        line-height: 1.6;
      }
    }
    
    .hero-image {
      position: absolute;
      right: -120rpx;
      bottom: -120rpx;
      width: 480rpx;
      height: 480rpx;
      opacity: 0.15;
      border-radius: 50%;
      transform: rotate(-15deg);
    }
  }

  .features {
    margin: -60rpx 30rpx 40rpx;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .feature-item {
      background: #fff;
      padding: 10rpx;
      border-radius: 24rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .feature-icon {
        font-size: 56rpx;
        margin-right: 24rpx;
      }
      
      .feature-text {
        flex: 1;
        
        .feature-title {
          font-size: 34rpx;
          font-weight: 600;
          color: #1a237e;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .feature-desc {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }

  .test-process {
    margin: 30rpx 30rpx 40rpx 30rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 50rpx 40rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
    
    .process-header {
      text-align: center;
      margin-bottom: 50rpx;
      
      .process-title {
        font-size: 40rpx;
        font-weight: 600;
        color: #1a237e;
        display: block;
        margin-bottom: 16rpx;
      }
      
      .process-subtitle {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
      }
    }
    
    .process-steps {
      .step {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .step-number {
          width: 70rpx;
          height: 70rpx;
          background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 36rpx;
          font-weight: 600;
          margin-right: 24rpx;
          box-shadow: 0 4rpx 12rpx rgba(26, 35, 126, 0.2);
        }
        
        .step-info {
          flex: 1;
          
          .step-title {
            font-size: 32rpx;
            font-weight: 500;
            color: #1a237e;
            display: block;
            margin-bottom: 8rpx;
          }
          
          .step-desc {
            font-size: 26rpx;
            color: #666;
            line-height: 1.5;
          }
        }
      }
    }
  }

  .start-section {
    margin: 0 30rpx 40rpx;
    text-align: center;
    
    .start-button {
      background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
      color: #fff;
      padding: 36rpx 0;
      border-radius: 20rpx;
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 24rpx;
      box-shadow: 0 8rpx 24rpx rgba(26, 35, 126, 0.2);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .button-text {
        margin-right: 12rpx;
      }
      
      .button-icon {
        transition: transform 0.3s ease;
      }
      
      &:active .button-icon {
        transform: translateX(8rpx);
      }
    }
    
    .disclaimer {
      font-size: 24rpx;
      color: #999;
      line-height: 1.5;
    }
  }
}

.test-page {
  min-height: 100vh;
  background: #fafafa;
  padding: 30rpx;
  
  .progress-bar {
    margin-bottom: 40rpx;
    
    .progress-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;
      
      .progress-text {
        font-size: 28rpx;
        color: #1a237e;
        font-weight: 500;
      }
      
      .progress-percent {
        font-size: 28rpx;
        color: #3949ab;
        font-weight: 600;
      }
    }
    
    .progress-track {
      height: 10rpx;
      background: #e0e0e0;
      border-radius: 5rpx;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #1a237e 0%, #3949ab 100%);
        transition: width 0.3s ease;
      }
    }
  }
  
  .question-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 50rpx 40rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
    
    .question-text {
      font-size: 36rpx;
      color: #1a237e;
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 50rpx;
      display: block;
    }
    
    .answer-list {
      .answer-item {
        background: #f5f5f5;
        padding: 36rpx;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        transition: all 0.3s ease;
        border: 2rpx solid transparent;
        
        &:active {
          transform: scale(0.98);
        }
        
        &.selected {
          background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
          border-color: #1a237e;
          box-shadow: 0 4rpx 12rpx rgba(26, 35, 126, 0.2);
          
          .answer-text {
            color: #fff;
          }
        }
        
        .answer-text {
          font-size: 32rpx;
          color: #333;
          line-height: 1.6;
        }
      }
    }
  }
  
  .result-page {
    .unlock-section {
      background: #fff;
      border-radius: 24rpx;
      padding: 80rpx 40rpx;
      text-align: center;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
      
      .unlock-content {
        .unlock-icon {
          font-size: 100rpx;
          margin-bottom: 40rpx;
        }
        
        .unlock-title {
          font-size: 44rpx;
          color: #1a237e;
          font-weight: 600;
          display: block;
          margin-bottom: 20rpx;
        }
        
        .unlock-subtitle {
          font-size: 30rpx;
          color: #666;
          display: block;
          margin-bottom: 50rpx;
          line-height: 1.5;
        }
        
        .unlock-button {
          background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
          color: #fff;
          padding: 36rpx 0;
          border-radius: 20rpx;
          font-size: 34rpx;
          font-weight: 600;
          box-shadow: 0 8rpx 24rpx rgba(26, 35, 126, 0.2);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.98);
          }
        }
      }
    }
    
    .result-section {
      background: #fff;
      border-radius: 24rpx;
      padding: 50rpx 40rpx;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
      
      .result-header {
        text-align: center;
        margin-bottom: 50rpx;
        
        .result-title {
          font-size: 40rpx;
          color: #1a237e;
          font-weight: 600;
          display: block;
          margin-bottom: 24rpx;
        }
        
        .result-type {
          font-size: 52rpx;
          color: #3949ab;
          font-weight: 700;
          display: block;
        }
      }
      
      .result-content {
        .result-desc {
          font-size: 30rpx;
          color: #666;
          line-height: 1.8;
          display: block;
          margin-bottom: 50rpx;
        }
      }
      
      .restart-button {
        background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
        color: #fff;
        padding: 36rpx 0;
        border-radius: 20rpx;
        font-size: 34rpx;
        font-weight: 600;
        box-shadow: 0 8rpx 24rpx rgba(26, 35, 126, 0.2);
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}

.ad-container {
  margin: 30rpx 0;
  border-radius: 20rpx;
  overflow: hidden;
}
</style>

